body{
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #131313;
  overflow: hidden;
}

.slide-container{
  width: 100%;
  height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:linear-gradient(to right,rgb(255,65,108),rgb(255,75,43))
}

.image-slider{
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.7s ease;
}

.slide-div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px 0 30px;
}

.img{
  width:240px;
  height:370px;
  object-fit: cover;
  transition: 0.5s ;
  filter:  saturate(10%);
}

.button{
  position: absolute;
  width:240px;
  height:370px;
  transition: 0.5s ;
  background-color: rgba(0,0,0,0.4)
}


.button:hover{
  background-color: rgba(0,0,0,0.2)
}

#slider-span1:target ~ .image-slider #img1,
#slider-span1:target ~ .image-slider #button-1{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span2:target ~ .image-slider #img2,
#slider-span2:target ~ .image-slider #button-2{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span3:target ~ .image-slider #img3,
#slider-span3:target ~ .image-slider #button-3{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span4:target ~ .image-slider  #img4,
#slider-span4:target ~ .image-slider  #button-4{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span5:target ~ .image-slider #img5,
#slider-span5:target ~ .image-slider #button-5{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span6:target ~ .image-slider #img6,
#slider-span6:target ~ .image-slider #button-6{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span7:target ~ .image-slider #img7,
#slider-span7:target ~ .image-slider #button-7{
  width:380px;
  height:585px;
  background-color: transparent;
  filter: saturate(100%);
}

#slider-span1:target ~ .image-slider{left:70%;}
#slider-span2.target ~ .image-slider{left:50%;}
#slider-span3:target ~ .image-slider{left:25%;}
#slider-span5:target ~ .image-slider{left:-25%;}
#slider-span6:target ~ .image-slider{left:-50%;}
#slider-span7:target ~ .image-slider{left:-70%;}
